<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()
const route = useRoute()

const currentTitle = computed(() => {
  return route.meta?.title || '页面'
})

function navigateTo(path: string) {
  router.push(path)
}
</script>

<template>
  <div id="app">
    <header class="app-header">
      <h1>Vue 3 省市区数据管理系统</h1>
      <p>基于 https://hongcat.oss-cn-chengdu.aliyuncs.com/jsondata/newAreaCodeV2024.json</p>
    </header>
    
    <nav class="tab-nav">
      <button 
        @click="navigateTo('/area-selector')" 
        :class="{ active: route.name === 'area-selector' }"
        class="tab-btn"
      >
        地区选择器
      </button>
      <button 
        @click="navigateTo('/api-test')" 
        :class="{ active: route.name === 'api-test' }"
        class="tab-btn"
      >
        API 测试
      </button>
      <button 
        @click="navigateTo('/debug')" 
        :class="{ active: route.name === 'debug' }"
        class="tab-btn"
      >
        🔧 调试面板
      </button>
      <button 
        @click="navigateTo('/dify-chat')" 
        :class="{ active: route.name === 'dify-chat' }"
        class="tab-btn dify-tab"
      >
        🤖 Dify 工作流
      </button>
      <button 
        @click="navigateTo('/streaming-chat')" 
        :class="{ active: route.name === 'streaming-chat' }"
        class="tab-btn streaming-tab"
      >
        💬 流式聊天
      </button>
      <button 
        @click="navigateTo('/config-settings')" 
        :class="{ active: route.name === 'config-settings' }"
        class="tab-btn config-tab"
      >
        ⚙️ 配置初始化
      </button>
    </nav>
    
    <main class="app-content">
      <RouterView />
    </main>
  </div>
</template>

<style scoped>
#app {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 0;
}

.app-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 300;
}

.app-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 1.1em;
}

.tab-nav {
  background-color: white;
  border-bottom: 2px solid #e9ecef;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}

.tab-btn {
  background: none;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  margin: 0 10px;
}

.tab-btn:hover {
  color: #3498db;
}

.tab-btn.active {
  color: #3498db;
  border-bottom-color: #3498db;
  font-weight: 500;
}

.tab-btn.dify-tab {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 6px 6px 0 0;
  border-bottom: 3px solid transparent;
}

.tab-btn.dify-tab:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  color: white;
}

.tab-btn.dify-tab.active {
  background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
  color: white;
  border-bottom-color: #4c51bf;
}

.tab-btn.streaming-tab {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 6px 6px 0 0;
  border-bottom: 3px solid transparent;
}

.tab-btn.streaming-tab:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
}

.tab-btn.streaming-tab.active {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: white;
  border-bottom-color: #047857;
}

.tab-btn.config-tab {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-radius: 6px 6px 0 0;
  border-bottom: 3px solid transparent;
}

.tab-btn.config-tab:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
}

.tab-btn.config-tab.active {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  color: white;
  border-bottom-color: #b45309;
}

.app-content {
  padding: 20px;
}

@media (max-width: 768px) {
  .app-header {
    padding: 30px 15px;
  }
  
  .app-header h1 {
    font-size: 2em;
  }
  
  .app-header p {
    font-size: 1em;
  }
  
  .tab-nav {
    padding: 0 10px;
    flex-direction: column;
  }
  
  .tab-btn {
    margin: 0;
    padding: 12px 20px;
  }
  
  .app-content {
    padding: 15px;
  }
}
</style>
